<script lang="ts">
	import type { Variant, Theme } from '$lib/components/Basic/Tag/Tag.svelte';

	// 核心拆分：checked（静态）+ modelValue（动态）
	let {
		children,
		variant = 'primary',
		theme = 'light',
		disabled = false,
		// 静态属性：存在即选中，不可切换（默认 undefined）
		checked = undefined,
		// 动态属性：双向绑定，可切换（默认 false）
		modelValue = $bindable(false),
		onChange = () => {},
		...restProps
	} = $props<{
		children?: any;
		variant?: Variant; // primary/info/success/warning/error
		theme?: Theme; // light/dark/plain
		disabled?: boolean;
		checked?: boolean; // 静态选中（仅展示，不可切换）
		modelValue?: boolean; // 动态绑定（可切换，支持 bind:）
		onChange?: (value: boolean) => void; // 动态模式状态变化回调
	} & Record<string, any>>();

	// 选中状态优先级：checked 静态 > modelValue 动态
	const isChecked = $derived(checked !== undefined ? checked : modelValue);
	// 判断是否为动态模式（仅 modelValue 存在时可切换）
	const isDynamicMode = $derived(checked === undefined && modelValue !== undefined);

	// 点击逻辑：仅动态模式可切换
	const handleClick = (e: MouseEvent) => {
		if (disabled || !isDynamicMode) return;
		const newVal = !modelValue;
		modelValue = newVal;
		onChange(newVal);
	};
</script>

<span
	class="check-tag"
	class:check-tag--light={theme === 'light'}
	class:check-tag--dark={theme === 'dark'}
	class:check-tag--plain={theme === 'plain'}
	class:check-tag--primary={variant === 'primary'}
	class:check-tag--info={variant === 'info'}
	class:check-tag--success={variant === 'success'}
	class:check-tag--warning={variant === 'warning'}
	class:check-tag--error={variant === 'error'}
	class:check-tag--disabled={disabled}
	class:check-tag--checked={isChecked}
	{...restProps}
	onclick={handleClick}
	role="checkbox"
	aria-checked={isChecked}
	aria-disabled={disabled}
	tabindex={disabled || !isDynamicMode ? -1 : 0}
	onkeydown={(e) => {
		if (disabled || !isDynamicMode) return;
		if (e.key === ' ' || e.key === 'Enter') {
			e.preventDefault();
			const newVal = !modelValue;
			modelValue = newVal;
			onChange(newVal);
		}
	}}
>
	{@render children?.()}
</span>

<style scoped lang="scss">
	/* 原有样式完全不变，沿用之前的 SCSS */
	:root {
		--check-tag-unchecked-bg: transparent;
		--check-tag-unchecked-color: #606266;
		--check-tag-unchecked-border: #dcdfe6;
		--check-tag-hover-border: #c0c4cc;
		--check-tag-transition-duration: 0.2s;
	}

	.check-tag {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 4px;
		border-radius: 4px;
		font-family: inherit;
		font-weight: 400;
		white-space: nowrap;
		box-sizing: border-box;
		line-height: 1;
		vertical-align: middle;
		cursor: pointer;
		padding: 0 10px;
		height: 24px;
		font-size: 13px;

		background-color: var(--check-tag-unchecked-bg);
		color: var(--check-tag-unchecked-color);
		border: 1px solid var(--check-tag-unchecked-border);

		transition: 
			background-color var(--check-tag-transition-duration) ease,
			border-color var(--check-tag-transition-duration) ease,
			color var(--check-tag-transition-duration) ease,
			outline var(--check-tag-transition-duration) ease;

		&.check-tag--disabled {
			cursor: not-allowed;
			opacity: 0.6;
			pointer-events: none;
		}

		&:not(.check-tag--checked):not(.check-tag--disabled):hover {
			border-color: var(--check-tag-hover-border);
		}

		&:focus-visible {
			outline: 2px solid var(--color-primary-500);
			outline-offset: 2px;
		}
	}

	// Light 主题 - 选中
	.check-tag--light.check-tag--checked {
		&.check-tag--primary {
			color: var(--color-primary-700);
			border: 1px solid var(--color-primary-300);
			background-color: color-mix(in srgb, var(--color-primary-500) 10%, transparent);
		}
		&.check-tag--info {
			color: var(--color-info-700);
			border: 1px solid var(--color-info-300);
			background-color: color-mix(in srgb, var(--color-info-500) 10%, transparent);
		}
		&.check-tag--success {
			color: var(--color-success-700);
			border: 1px solid var(--color-success-300);
			background-color: color-mix(in srgb, var(--color-success-500) 10%, transparent);
		}
		&.check-tag--warning {
			color: var(--color-warning-700);
			border: 1px solid var(--color-warning-300);
			background-color: color-mix(in srgb, var(--color-warning-500) 10%, transparent);
		}
		&.check-tag--error {
			color: var(--color-error-700);
			border: 1px solid var(--color-error-300);
			background-color: color-mix(in srgb, var(--color-error-500) 10%, transparent);
		}
	}

	// Dark 主题 - 选中
	.check-tag--dark.check-tag--checked {
		&.check-tag--primary {
			color: #fff;
			border-color: var(--color-primary-500);
			background-color: var(--color-primary-600);
		}
		&.check-tag--info {
			color: #fff;
			border-color: var(--color-info-500);
			background-color: var(--color-info-600);
		}
		&.check-tag--success {
			color: #fff;
			border-color: var(--color-success-500);
			background-color: var(--color-success-600);
		}
		&.check-tag--warning {
			color: #fff;
			border-color: var(--color-warning-500);
			background-color: var(--color-warning-600);
		}
		&.check-tag--error {
			color: #fff;
			border-color: var(--color-error-500);
			background-color: var(--color-error-600);
		}
	}

	// Plain 主题 - 选中
	.check-tag--plain.check-tag--checked {
		&.check-tag--primary {
			color: var(--color-primary-500);
			border: 1px solid var(--color-primary-200);
			background-color: transparent;
		}
		&.check-tag--info {
			color: var(--color-info-500);
			border: 1px solid var(--color-info-200);
			background-color: transparent;
		}
		&.check-tag--success {
			color: var(--color-success-500);
			border: 1px solid var(--color-success-200);
			background-color: transparent;
		}
		&.check-tag--warning {
			color: var(--color-warning-500);
			border: 1px solid var(--color-warning-200);
			background-color: transparent;
		}
		&.check-tag--error {
			color: var(--color-error-500);
			border: 1px solid var(--color-error-200);
			background-color: transparent;
		}
	}

	// 禁用选中样式
	.check-tag--disabled.check-tag--checked {
		filter: saturate(0.8);
	}
</style>